<template>
    <div>
        <div ref="commonEchatRef" :style="{ height: height, width: width }"></div>
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, watchEffect } from 'vue'
import useEcharts from '@/hooks/useEcharts';

//echarts的 ref属性
const commonEchatRef = ref<HTMLElement>()

//接收父组件传来的值
// withDefaults:设置默认值。 第二个参数是设置初始值
const props = withDefaults(defineProps<{
    width?: string,
    height?: string,
    options: any
}>(), {
    width: '100%',
    height: '360px'
})
onMounted(() => {
    const { setOptions, resize } = useEcharts(commonEchatRef.value!) // 叹号：断定commonEchatRef.value这个dom元素肯定是存在的
    watchEffect(() => {
        setOptions(props.options)
    })
    // 自适应
    window.addEventListener('resize', () => {
        resize();
    })
})

</script>
<style scoped lang='scss'>
</style>